import {
  Button,
  Cell,
  CountDown,
  Form,
  Input,
  Radio,
  Toast,
  Uploader,
} from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import {
  getCodeApi,
  registerApi,
  storeRegisterApi,
} from "../../../../../servers/servers";
import { BASE_URL } from "../../../../../servers/http";
import Taro from "@tarojs/taro";

const StoreRegistration = () => {
  const [endTime, setEndTime] = useState(0);

  const [phone, setPhone] = useState("");

  const [show, SetShow] = useState(false);
  const [toastMsg, SetToastMsg] = useState("");

  const [form] = Form.useForm();

  // 是否已经发送倒计时
  const [isSendCode, setIsSendCode] = useState(false);

  return (
    <Form
      form={form}
      labelPosition="right"
      footer={
        <Button formType="submit" block size="large" type="primary">
          注册
        </Button>
      }
      onFinish={async (values) => {
        const { front = [], opposite = [], license = [] } = values || {};

        let _frontFileUrl = "";
        let oppositeFileUrl = "";
        let frontFileUrl = "";

        if (front.length > 0) {
          _frontFileUrl = front?.[0]?.responseText?.data
            ? JSON.parse(front?.[0]?.responseText?.data).data?.url
            : "";
        }
        if (opposite.length > 0) {
          oppositeFileUrl = opposite?.[0]?.responseText?.data
            ? JSON.parse(opposite?.[0]?.responseText?.data)?.data?.url
            : "";
        }
        if (license.length > 0) {
          frontFileUrl = license?.[0]?.responseText?.data
            ? JSON.parse(license?.[0]?.responseText?.data)?.data?.url
            : "";
        }

        try {
          await storeRegisterApi({
            ...values,
            front: _frontFileUrl,
            opposite: oppositeFileUrl,
            license: frontFileUrl
          });

          SetToastMsg("注册成功");
          SetShow(true);

          Taro.navigateBack();
        } catch (error) {}
      }}
    >
      <Form.Item
        rules={[{ required: true, message: "请输入商户名" }]}
        label="商户名"
        name="forshort"
      >
        <Input
          className="nut-input-text"
          placeholder="请输入商户名"
          type="text"
        />
      </Form.Item>

      <Form.Item
        rules={[{ required: true, message: "请输入姓名" }]}
        label="姓名"
        name="name"
      >
        <Input
          className="nut-input-text"
          placeholder="请输入姓名"
          type="text"
        />
      </Form.Item>

      <Form.Item
        rules={[{ required: true, message: "请输入手机号" }]}
        label="手机号"
        name="mobile"
      >
        <Input
          className="nut-input-text"
          placeholder="手机号"
          type="text"
          onChange={(val) => {
            setPhone(val);
          }}
        />
      </Form.Item>

      <Form.Item
        rules={[{ required: true, message: "请输入密码" }]}
        label="密码"
        name="password"
      >
        <Input
          className="nut-input-text"
          placeholder="请输入密码"
          type="password"
        />
      </Form.Item>

      <Form.Item
        label="营业执照"
        name="license"
        rules={[{ required: true, message: "请上传营业执照" }]}
      >
        <Uploader
          url={`${BASE_URL}/common/image`}
          uploadLabel="营业执照"
          style={{ marginInlineEnd: "10px" }}
        />
      </Form.Item>

      <Form.Item
        label="身份证正面"
        name="front"
        rules={[{ required: true, message: "请上传身份证正面" }]}
      >
        <Uploader
          url={`${BASE_URL}/common/image`}
          uploadLabel="身份证正面"
          style={{ marginInlineEnd: "10px" }}
        />
      </Form.Item>

      <Form.Item
        label="身份证反面"
        name="opposite"
        rules={[{ required: true, message: "请上传身份证反面" }]}
      >
        <Uploader
          url={`${BASE_URL}/common/image`}
          uploadLabel="身份证反面"
          style={{ marginInlineEnd: "10px" }}
        />
      </Form.Item>

      <Form.Item label="验证码" name="code">
        <div
          style={{
            display: "flex",
            alignItems: "center",
            background: "#fff",
            padding: "0 10px",
          }}
        >
          <Input
            placeholder="短信验证码"
            onChange={(code) => {
              form.setFieldsValue({
                code: code,
              });
            }}
          />
          <div
            className="right"
            style={{ display: "flex", alignItems: "center" }}
          >
            {isSendCode ? (
              <Button type="primary" size="small" disabled>
                <CountDown
                  style={{
                    color: "white",
                  }}
                  format="ss 秒"
                  remainingTime={60000}
                  onEnd={() => {
                    setIsSendCode(false);
                  }}
                />
              </Button>
            ) : (
              <Button
                type="primary"
                size="small"
                onClick={async () => {
                  try {
                    try {
                      const { data } = await getCodeApi(phone);

                      SetToastMsg(data);
                      SetShow(true);
                      setIsSendCode(true);
                    } catch (error) {}
                  } catch (error) {}
                }}
              >
                获取验证码
              </Button>
            )}
          </div>
        </div>
      </Form.Item>

      <Toast
        type="text"
        visible={show}
        content={toastMsg}
        onClose={() => {
          SetShow(false);
        }}
      />
    </Form>
  );
};

export default StoreRegistration;
